<template>
	<view class="goods-actInfo">
		<view class="goods-activity-tab" @click="actShow=true">
			<view class="activity-left">促销</view>
			<view class="activity-tab-center sales-tab">
				<actTag :type="activity.activityType" :customStyle="{marginRight:'16rpx'}"/>
				<view class="activity-text activity-sales-text">{{activity.activityTypeRuleDescripetion}}</view>
			</view>
			<view class="activity-right"><u-icon size="28" color="#999" name="arrow-right" class="activity-right-icon"></u-icon></view>
		</view>
		<u-popup v-model="actShow" mode="bottom" border-radius="16"  height="50%" :closeable="true" close-icon="close-circle" close-icon-size="48" close-icon-color="#BFBFBF">
			<view class="pop-content-box">
				<view class="pop-content-title">更多信息</view>
					<view class="activity-rule">
						<view class="activity-rule-left">
							<actTag :type="activity.activityType" :custom-style="{marginRight:'24rpx'}" />
						</view>
						<view class="activity-text">
							{{activity.activityTypeRuleDescripetion}}
						</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import actTag from '@/components/activity/actTag.vue'
	export default{
		components:{ actTag },
		props:{
			activity:{
				type:Object,
				default:()=>{}
			}
		},
		data(){
			return {
				actShow:false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.goods-actInfo{
		.pop-content-box{
			.pop-content-title{
				text-align: center;
				color: $u-main-color;
				font-weight: bold;
				font-size: 32rpx;
				line-height: 108rpx;
			}
			.activity-rule{
				display: flex;
				align-items: center;
				padding: 24rpx;
				.activity-rule-left{
					align-self: flex-start;
					flex-shrink: 0;
				}
				.activity-text{
					
				}
			}
		}
		.goods-activity-tab{
			display: flex;
			justify-content: space-between;
			height:88rpx;
			align-items: center;
			padding:0 24rpx;
			.activity-left{
				width:104rpx;
				text-align: justify;
				text-align-last: justify;
				margin-right: 24rpx;
				color:$u-main-color;
				font-weight: 700;
			}
			.activity-tab-center{
				flex: 1;
				overflow: hidden;
				.activity-text{
					flex: 1;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
			.sales-tab{
				display: flex;
			}
			.other-tab{
				display: flex;
			}
		}
	}
</style>
